<template>
    <div class="get-money">
        <div class="balance-div">
            <span class="iconfont icon-havemoney"></span>
            <span class="balance-word">余额</span>
            <span class="balance">{{balance}}<span class="yen">元</span></span>
        </div>
        <div class="input-area">
            <p class="tip"><span class="iconfont icon-tishi1"></span>每次提现不少于1元</p>
            <div class="cell money-cell">
                <span class="cell-name"><span class="necessary">*</span>提现金额(￥)</span>
                <input class="money-text" @textInput="textInutCheck('money',$event)" type="number" ref="moneyText" v-model="moneyValue" placeholder="请输入提现金额" >
            </div>
        </div>
        <mt-button class="commit-btn" type="default" @click.native="commitHandle">提交</mt-button>
    </div>
</template>

<script>
import Vue from "vue";
import { mapState } from "vuex";
import { Toast, Button } from "mint-ui";
import "mint-ui/lib/button/style.css";
import "mint-ui/lib/toast/style.css";
import md5 from "js-md5";
Vue.component(Button.name, Button);
Vue.component(Toast.name, Toast);

export default {
  name: "get-money",
  data() {
    return {
      moneyValue: ""
    };
  },
  components: {},
  created() {},
  methods: {
    textInutCheck(type, event) {
      if (!/^[0-9.]*$/.test(event.data)) {
        event.returnValue = false;
      }
      if (type == "money") {
        if (this.moneyValue.length >= 10) event.returnValue = false;
      }
    },
    commitHandle() {
      let requestMoney = parseFloat(this.moneyValue);
      if (!this.moneyValue) {
        this.showMsg("请输入有效的数字");
        return;
      }
      // if (requestMoney < 1) {
      //   this.showMsg("提现金额不能少于1元");
      //   return;
      // }
      if (requestMoney > this.balance) {
        this.showMsg("余额不足");
        return;
      }

      //fuc = withdraw，pwd:提现密码   money:金额  user:申请人
      this.$store.dispatch("toggleLoading", true);
      this.$http
        .post(this.path + "store/Payment/withdraw_handle", {
          money: requestMoney,
          uid: this.userid
        })
        .then(response => {
          this.$store.dispatch("toggleLoading", false);
          let data = response.body;
          if (data.status == "ok") {
            this.showMsg("操作成功");
            this.moneyValue = "";
            this.$store.commit("UPDATE_BALANCE", data.result);
          } else {
            this.showMsg(data.msg);
          }
        })
        .catch(response => {
          console.log(response);
        });
    },
    showMsg: function(msg) {
      Toast({
        message: msg,
        iconClass: "iconfont icon-tishi1",
        duration: 1000
      });
    }
  },
  mounted() {},
  computed: {
    ...mapState(["openid", "path", "userid", "balance"])
  }
};
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.get-money {
  min-height: 100%;
  position: relative;

  .balance-div {
    padding-top: 0.05rem;
    height: 0.6rem;
    border-bottom: 1px #ddd solid;
    display: flex;
    align-items: center;
    text-align: center;

    .icon-havemoney {
      font-size: 0.2rem;
      color: #595656;
      margin-left: 0.1rem;
    }

    .balance-word {
      font-size: 0.15rem;
      color: #595656;
      letter-spacing: 0.01rem;
      margin-left: 0.01rem;
    }

    .balance {
      margin-left: 0.12rem;
      font-size: 0.3rem;
      color: #e61874;

      .yen {
        margin-left: 0.02rem;
        font-size: 0.12rem;
        color: #e61874;
      }
    }
  }

  .input-area {
    padding: 0 0.2rem;
    box-sizing: border-box;
    margin-top: 0.24rem;

    .tip {
      font-size: 0.14rem;
      color: #8a8a8a;
      letter-spacing: 0.01rem;
      margin-bottom: 0.08rem;

      .icon-tishi1 {
        font-size: 0.19rem;
        margin-right: 0.02rem;
      }
    }

    .cell {
      margin-top: 0.05rem;
      width: 100%;
      height: 0.34rem;
      display: flex;
      align-items: center;

      .cell-name {
        padding-left: 0.05rem;
        flex-shrink: 0;
        font-size: 0.12rem;
        color: #595656;
        letter-spacing: 0.01rem;
        position: relative;
        top: 0.03rem;

        .necessary {
          margin-right: 0.02rem;
        }
      }

      input {
        width: 100%;
        flex: 1;
        margin-left: 0.1rem;
        margin-right: 0.2rem;
        -webkit-appearance: none; // 去掉iphone背景阴影
        border: none;
        outline: none;
        box-sizing: border-box;
        -webkit-touch-callout: none;
        color: #333;
        padding-left: 0.14rem;
        font-size: 0.14rem;
        letter-spacing: 0.005rem;
        line-height: 0.28rem;
        border-bottom: 1px #ddd solid;

        &::-webkit-input-placeholder {
          color: #ddd;
          font-size: 0.12rem;
          letter-spacing: 0.01rem;
        }
      }
    }
  }

  .commit-btn {
    position: absolute;
    bottom: 0.24rem;
    left: 0.2rem;
    background-color: #b37287;
    color: #fff;
    font-size: 0.13rem;
    letter-spacing: 0.04rem;
    height: 0.32rem;
    box-shadow: none;
    width: 2.8rem;
  }
}
</style>
